{% extends "that_person_center/base.html" %}
{% load state_display %}

{% block page_link %}
    <script src="../../static/personal_center/js/echarts.js"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="width: 100%;">
        <div style="width: 98%;height: 245px;padding-top: 1.2%;background: white;margin-left: 1%;margin-top: 1%;">
            <div style="display: inline-block;vertical-align: top;width: 32%;height: 90%;background: linear-gradient(to right, #c9e2b3 , #00a854);margin-left: 0.7%;">
                <div style="width: 100%;height: 60px;line-height: 60px;padding-left: 5%;letter-spacing: 2px;color: white;"><strong style="font-size: 18px;">我的待办</strong></div>
                <div style="width: 100%;height: 80px;line-height: 60px;text-align: center;letter-spacing: 2px;color: white;"><strong style="font-size: 48px;" id="my-need">288</strong> 个</div>
                <div style="width: 100%;height: 60px;line-height: 60px;text-align: right;letter-spacing: 2px;color: white;padding-right: 5%;">
                    <p style="cursor: pointer;"><a style="color: white;" href="/personal-center/process_management.html?type=我的待办&folw_type=&folw=&page=1&page_size=20&wd=">查看详情</a> <i class="iconfont icon-gengduo1"></i></p>
                </div>
            </div>

            <div style="display: inline-block;vertical-align: top;width: 32%;height: 90%;background: #2db7f5;margin-left: 1%;">
                <div style="width: 100%;height: 60px;line-height: 60px;padding-left: 5%;letter-spacing: 2px;color: white;"><strong style="font-size: 18px;">我的已办</strong></div>
                <div style="width: 100%;height: 80px;line-height: 60px;text-align: center;letter-spacing: 2px;color: white;"><strong style="font-size: 48px;" id="completed">999+</strong> 个</div>
                <div style="width: 100%;height: 60px;line-height: 60px;text-align: right;letter-spacing: 2px;color: white;padding-right: 5%;">
                    <p style="cursor: pointer;"><a style="color: white;" href="/personal-center/process_management.html?type=我的已办&folw_type=&folw=&page=1&page_size=20&wd=">查看详情</a> <i class="iconfont icon-gengduo1"></i></p>
                </div>
            </div>

            <div style="display: inline-block;vertical-align: top;width: 32%;height: 90%;background: linear-gradient(to left, #cfcfcf , #1c2838);margin-left: 1%;">
                <div style="width: 100%;height: 60px;line-height: 60px;padding-left: 5%;letter-spacing: 2px;color: white;"><strong style="font-size: 18px;">我的申请</strong></div>
                <div style="width: 100%;height: 80px;line-height: 60px;text-align: center;letter-spacing: 2px;color: white;"><strong style="font-size: 48px;" id="my-apply">999+</strong> 个</div>
                <div style="width: 100%;height: 60px;line-height: 60px;text-align: right;letter-spacing: 2px;color: white;padding-right: 5%;">
                    <p style="cursor: pointer;"><a style="color: white;" href="/personal-center/process_management.html?type=我的申请&folw_type=&folw=&page=1&page_size=20&wd=">查看详情</a> <i class="iconfont icon-gengduo1"></i></p>
                </div>
            </div>
        </div>

        <div style="width: 98%;margin-left: 1%;margin-top: 1%;height: 250px;">
            <div style="width: 49.5%;height: 100%;background: white;display: inline-block;vertical-align: top;">
                <div style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;background: linear-gradient(to right, #cfcfcf , #6dbfff);padding-left: 2%;color: white;letter-spacing: 2px;line-height: 40px;">
                    我的会议
                    <div style="float: right;padding-right: 2%;cursor: pointer;" onclick="location.href='/personal-center/room_reservation.html';">更多 <i class="iconfont icon-gengduo1"></i></div>
                </div>
                <div style="width: 100%;height: 205px;">
                    {% if meet_obj|length %}
                        {% for meet in meet_obj %}
                            <div style="width: 100%;height: 40px;border-bottom: #cfcfcf dashed 1px">
                                <div style="width: 70%;float: left;height: 40px;line-height: 40px;padding-left: 1.5%;cursor: pointer;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">{{ meet.particulars }}</div>
                                <div style="width: 29%;float: right;height: 40px;line-height: 40px;padding-left: 2%;">{{ meet.create_time|date:'Y-m-d H:i' }}</div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div style="width: 100%;height: 205px;line-height: 205px;text-align: center;color: #cfcfcf;letter-spacing: 3px;">
                            暂无数据
                        </div>
                    {% endif %}
                </div>
            </div>

            <div style="width: 49.7%;margin-left: 0.5%;height: 100%;background: white;display: inline-block;vertical-align: top;">
                <div style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;background: linear-gradient(to left, #cfcfcf , #6dbfff);padding-left: 2%;color: white;letter-spacing: 2px;line-height: 40px;">
                    我的邮件
                    <div style="float: right;padding-right: 2%;cursor: pointer;" onclick="location.href='/correspondence/inbox.html';">更多 <i class="iconfont icon-gengduo1"></i></div>
                </div>
                <div style="width: 100%;height: 205px;">
                    {% for letter in letter_obj %}
                        <div style="width: 100%;height: 40px;border-bottom: #cfcfcf dashed 1px">
                            <div style="width: 70%;float: left;height: 40px;line-height: 40px;padding-left: 1.5%;cursor: pointer;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;" onclick="location.href='/correspondence/inbox.html?message_id={{ letter.inbox_id.id }}';">{{ letter.inbox_id.title }}</div>
                            <div style="width: 29%;float: right;height: 40px;line-height: 40px;padding-left: 2%;">{{ letter.inbox_id.create_time|date:'Y-m-d H:i' }}</div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div style="width: 98%;margin-left: 1%;height: 310px;margin-top: 1%;background: white;">
            <div id="bm_apply" style="height: 100%;">

            </div>
        </div>
    </div>
{% endblock %}

{% block script %}

    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("my-home").className = "add_class";
            document.getElementById("my-center").className = "add-nav-active";
            my_flows();
        };

        function my_flows() {
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/ios_api/process_management", true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        document.getElementById("loading").style.display = "none";
                        document.getElementById("my-need").innerText = JsonDate["data"][0]["need_do"];
                        document.getElementById("completed").innerText = JsonDate["data"][0]["completed"];
                        document.getElementById("my-apply").innerText = JsonDate["data"][0]["apply"];
                    }
                }
            };
        }

        var chartDom = document.getElementById('bm_apply');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            xAxis: {
                type: 'category',
                data: {{ dep_list | safe }},
                axisLabel: {
                    rotate: 40
                }
            },
            yAxis: {
                type: 'value'
            },
            tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                trigger: 'axis',
                backgroundColor: 'rgba(32, 33, 36,.7)',
                borderColor: 'rgba(32, 33, 36,0.20)',
                borderWidth: 1,
                textStyle: { // 文字提示样式
                    color: '#fff',
                    fontSize: '12'
                },
                axisPointer: { // 坐标轴虚线
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }

                },
            },
            grid:{ // 让图表占满容器
                left:"80px",
                right:"80px",
                bottom:"100px"
            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                }
            },
            series: [
                {
                    data: {{ dep_number_list | safe }},
                    type: 'bar'
                }

            ]
        };
        option && myChart.setOption(option);
    </script>
{% endblock %}
